<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>[[${sjcd}]] - [[${T(com.b2c.erp.DataConfigObject).getInstance().getSysName()}]]</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;top: 0px;">
    <style type="text/css">
        .record-box h2 {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 40px;
        }

        .record-input input {
            width: 400px;
            height: 22px;
            line-height: 22px;
            font-size: 16px;
            padding: 14px 9px;
            border: 1px solid #787878;
        }
    </style>
    <!-- start sp-wrapper -->
    <link rel="stylesheet" href="/sb/stock.css"/>
    <div class="sp-wrapper">
        <h2 class="sp-title"><span>[[${sjcd}]]</span></h2>
        <div class="sp-tool">
            <span class="fl">
                <form action="/stock_out/list" method="get">
                <b>日期：<input type="text" th:value="${startDate}" class="date" name="startDate" id="strat_date"> - <input type="text" name="endDate" th:value="${endDate}" class="date" id="end_date"></b>
                <b><input type="text" id="billNo" style="width: 200px;" name="billNo" autocomplete="off" th:value="${billNo}" placeholder="输入单据编号查询"></b>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select id="type" name="type">
                                <option value="">出库类型</option>
                                <option value="1">订单拣货出库</option>
                                <option value="2">采购退货出库</option>
                                <option value="3">盘点出库</option>
                                <option value="4">报损出库</option>
                            </select>
                        </div>
                   </div>
                <b><input type="submit" class="button" value="查询"></b>
                    <b>总共：&nbsp;[[${totalSize}]]&nbsp;条记录</b>
                    <b><input type="button" class="button" id="excel_btn" value="导出"></b>
                </form>
            </span>
        </div>
        <div class="sp-table">
            <table>
                <thead>
                <tr>
                    <th>ID</th>
                    <th>出库单号</th>
                    <th>源单据号</th>
                    <th>出库人</th>
                    <th>出库总数量</th>
                    <th>出库类型</th>
                    <th>出库最后完成时间</th>
                    <th>出库状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="item:${list}">
                    <td th:text="${item.getId()}">2019-4-11</td>
                    <td th:text="${item.stockOutNo}">CG190411100335401</td>
                    <td th:text="${item.sourceNo}">CG190411100335401</td>
                    <td th:text="${item.stockOutUserName}">华衣</td>
                    <td th:text="${item.quantity}"></td>
                    <td th:text="${T(com.b2c.entity.erp.enums.EnumStockOutType).getName(item.getOutType())}"></td>
                    <td th:text="${#dates.format(item.getCompleteTime() * 1000,'yyyy-MM-dd HH:mm:ss')}">2019-4-11</td>
                    <td th:text="${T(com.b2c.entity.erp.enums.StockOutFormStatusEnum).getName(item.getStatus())}"></td>
                    <td>
                        <b  class="stock_out_detail layui-btn layui-btn-warm" th:attr="data-id=${item.id}" >出库单详情</b>
                    </td>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="pages">
            <paging:pager th:value="${pageIndex}" th:rows="${totalSize}" th:size="${pageSize}"/>
        </div>
    </div>
    <script type="text/javascript">
        layui.use(['laydate', 'layer'], function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#strat_date' //指定元素
            });
        });
        layui.use(['laydate', 'layer'], function () {
            var laydate = layui.laydate;
            var layer = layui.layer;

            //执行一个laydate实例
            laydate.render({
                elem: '#end_date' //指定元素
            });

            $(".stock_out_detail").click(function(){
                var id = $(this).attr('data-id');
                layer.open({
                    type: 2,
                    title: '出库详情',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['940px', '90%'],
                    content: '/stock_out/form_item?id=' +id
                });
            })
        });



        $("#excel_btn").click(function () {
            //组合条件
            var url = "/stock_out/stock_out_export";
            var startTime = $("input[name=startDate]").val();
            var endTime = $("input[name=endDate]").val();

            if (startTime != '') {
                url += "?startTime=" + startTime;
            }
            if (startTime != '') {
                url += "&endTime=" + endTime;
            }
            window.open(url, "_blank");
        })
    </script>
</div>
</body>
</html>
